<template>
    <!-- 修改课程弹窗 -->
    <uni-popup ref="editPopup" type="bottom" :mask-click="false">
        <view class="edit-popup">
            <view class="popup-header">
                <text class="title">修改课程信息</text>
                <uni-icons type="close" size="24" color="#999" @click="closeEditPopup" />
            </view>

            <scroll-view scroll-y class="form-container">
                <form @submit.prevent="handleSubmit">
                    <!-- 课程名称 -->
                    <view class="form-item">
                        <text class="label">课程名称</text>
                        <uni-easyinput v-model="editForm.courseName" placeholder="请输入课程名称" :inputBorder="false" />
                    </view>

                    <!-- 时间选择 -->
                    <view class="form-item">
                        <text class="label">课程时间</text>
                        <view class="time-pickers">
                            <uni-datetime-picker type="date" v-model="editForm.startTime" placeholder="开始时间" />
                            <text class="time-separator">至</text>
                            <uni-datetime-picker type="date" v-model="editForm.endTime" placeholder="结束时间" />
                        </view>
                    </view>

                    <!-- 课程状态 -->
                    <view class="form-item">
                        <text class="label">课程状态</text>
                        <picker :range="statusOptions" @change="handleStatusChange" :value="statusIndex">
                            <view class="picker">
                                {{ editForm.status || '请选择状态' }}
                                <uni-icons type="arrowdown" size="14" color="#666" />
                            </view>
                        </picker>
                    </view>
                    <view class="form-item">
                        <text class="label">上课日期</text>
                        <view class="day-selector">
                            <view v-for="(day, index) in dayOptions" :key="index"
                                :class="['day-item', { 'selected': isDaySelected(day.value) }]"
                                @click="toggleDay(day.value)">
                                {{ day.label }}
                            </view>
                        </view>
                    </view>
                    <!-- 课程描述 -->
                    <view class="form-item">
                        <text class="label">课程描述</text>
                        <textarea v-model="editForm.description" placeholder="请输入课程描述" class="description-textarea"
                            maxlength="200" />
                    </view>

                    <!-- 操作按钮 -->
                    <view class="button-group">
                        <button class="submit-btn" form-type="submit">保存修改</button>
                        <button class="cancel-btn" @click="closeEditPopup">取消</button>
                    </view>
                </form>
            </scroll-view>
        </view>
    </uni-popup>
</template>

<script>
import { changeCourseInfo } from '../../request/teacherCourse'

export default {
    props: {
        course: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            editForm: {
                courseId: '',
                courseName: '',
                startTime: '',
                endTime: '',
                status: '',
                description: ''
            },
            dayOptions: [
                { label: '周一', value: 'MONDAY' },
                { label: '周二', value: 'TUESDAY' },
                { label: '周三', value: 'WEDNESDAY' },
                { label: '周四', value: 'THURSDAY' },
                { label: '周五', value: 'FRIDAY' },
                { label: '周六', value: 'SATURDAY' },
                { label: '周日', value: 'SUNDAY' }
            ],
            statusOptions: ['active', 'archived'],
            statusIndex: 0
        };
    },
    methods: {
        // 打开弹窗
        openEditPopup(course) {
            this.editForm = { ...course, openday: this.course.openday || '' };
            this.statusIndex = this.statusOptions.indexOf(course.status);
            this.$refs.editPopup.open();
        },
        // 关闭弹窗
        closeEditPopup() {
            this.$refs.editPopup.close();
        },
        isDaySelected(day) {
            return this.editForm.openday?.split(',').includes(day);
        },
        toggleDay(day) {
            const days = this.editForm.openday ? this.editForm.openday.split(',') : [];
            const index = days.indexOf(day);

            if (index > -1) {
                days.splice(index, 1);
            } else {
                days.push(day);
            }

            this.editForm.openday = days.sort().join(',');
        },
        // 处理状态选择
        handleStatusChange(e) {
            this.editForm.status = this.statusOptions[e.detail.value];
            this.statusIndex = e.detail.value;
        },

        // 提交表单
        async handleSubmit() {
            if (!this.validateForm()) return;
            this.editForm = {
                courseId: this.course.courseId,
                courseName: this.editForm.courseName,
                startTime: this.editForm.startTime,
                endTime: this.editForm.endTime,
                status: this.editForm.status,
                description: this.editForm.description,
                openday: this.editForm.openday,
                teacherId : this.course.teacherId
            };
            try {
                const res = await changeCourseInfo(this.editForm);
                uni.showToast({ title: '修改成功', icon: 'success' });
                this.$emit('refresh'); // 触发父组件刷新数据
                this.closeEditPopup();
            } catch (error) {
                uni.showToast({
                    title: error.message || '修改失败',
                    icon: 'none'
                });
            }
        },

        // 表单验证
        validateForm() {
            if (!this.editForm.courseName.trim()) {
                uni.showToast({ title: '请输入课程名称', icon: 'none' });
                return false;
            }

            if (!this.editForm.startTime || !this.editForm.endTime) {
                uni.showToast({ title: '请选择课程时间', icon: 'none' });
                return false;
            }

            if (new Date(this.editForm.startTime) > new Date(this.editForm.endTime)) {
                uni.showToast({ title: '结束时间不能早于开始时间', icon: 'none' });
                return false;
            }

            return true;
        }
    }
};
</script>

<style lang="scss" scoped>
.edit-popup {
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding: 40rpx;
    max-height: 80vh;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
    }
}

.form-container {
    max-height: 60vh;
}

.form-item {
    margin-bottom: 40rpx;

    .label {
        display: block;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
    }
}

.time-pickers {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .time-separator {
        color: #999;
    }
}

.picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    border: 1rpx solid #e4e7ed;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
}

.description-textarea {
    width: 100%;
    height: 200rpx;
    padding: 24rpx;
    border: 1rpx solid #e4e7ed;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.button-group {
    display: flex;
    gap: 20rpx;
    margin-top: 60rpx;

    button {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;

        &.submit-btn {
            background: #5B89F7;
            color: #fff;
        }

        &.cancel-btn {
            background: #f5f5f5;
            color: #666;
        }
    }
}

.day-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
}

.day-item {
    padding: 12rpx 24rpx;
    border: 1rpx solid #e4e7ed;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.3s;

    &.selected {
        background: #5B89F7;
        color: white;
        border-color: #5B89F7;
    }
}
</style>